<template>
  <div class="overview-root runningAnalysis-root">
    <div class="root-top">
      <div class="overview-bottom">
        <div class="box-33 box">
          <formTitleVue
            title="今日报警预警"
          />
          <div class="main-alarmtoday">
            <div class="main-li">
              <img class="mid" src="@/assets/alarm/01.png" alt="">
              <div class="mid">
                <p>报警数</p>
                <div class="mide-bottom">
                  <span class="big-num" style="color:#fc5d5d;">{{todayData.recordNum}}</span>
                  <span class="bottom">较昨日 <i :class="recordCompare.class" :style="recordCompare.color">{{recordCompare.num}}</i></span>
                </div>
              </div>
            </div>
            <div class="main-li">
              <img src="@/assets/alarm/03.png" alt="">
              <div class="mid">
                <p>已处置</p>
                <div class="mide-bottom">
                  <span class="big-num">{{todayData.recordCzNum}}</span>
                  <span class="bottom"></span>
                </div>
              </div>
            </div>
            <div class="main-li">
              <img class="mid" src="@/assets/alarm/02.png" alt="">
              <div class="mid">
                <p>预警数</p>
                <div class="mide-bottom">
                  <span class="big-num">{{todayData.warnNum}}</span>
                  <span class="bottom">较昨日 <i :class="warnCompare.class" :style="warnCompare.color">{{warnCompare.num}}</i></span>
                </div>
              </div>
            </div>
            <div class="main-li">
              <img src="@/assets/alarm/03.png" alt="">
              <div class="mid">
                <p>已处置</p>
                <div class="mide-bottom">
                  <span class="big-num">{{todayData.warnCzNum}}</span>
                  <span class="bottom"></span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="box-66 box">
            <formTitleVue
              title="基础设施统计"
            />
            <div class="main-infrastructure">
              <div class="main-li">
                <div class="top">
                  <img src="@/assets/alarm/05.png" alt="">
                  <div class="right">
                    <span>人员密集区域</span>
                    <div class="bottom">
                      <div class="bottom-line">
                        <div @click="openFacilityDialog('ALARM_RLMDL', true)">人流密度 {{baseInfo.rlmdNum}}</div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            <div class="main-li">
              <div class="top">
                <img src="@/assets/alarm/04.png" alt="">
                <div class="right">
                  <span>交通设施</span>
                  <div class="bottom">
                    <div class="bottom-line">
                      <div @click="openFacilityDialog('ALARM_DLL', true)">道路 {{baseInfo.dlNum}}</div>
                    </div>
                    <div class="bottom-line">
                      <div @click="openFacilityDialog('ALARM_QLL', true)">桥梁 {{baseInfo.qlNum}}</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="main-li">
              <div class="top">
                <img src="@/assets/alarm/06.png" alt="">
                <div class="right">
                  <span>在建工地</span>
                  <div class="bottom">
                    <div class="bottom-line">
                      <div @click="openFacilityDialog('ALARM_GDL', true)">在建工地 {{baseInfo.zjgdNum}}</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="main-li">
              <div class="top">
                <img src="@/assets/alarm/07.png" alt="">
                <div class="right">
                  <span>房屋建筑</span>
                  <div class="bottom">
                    <div class="bottom-line">
                      <div class="w50" @click="openFacilityDialog('ALARM_JZL', true)">建筑 {{baseInfo.jzNum}}</div>
                      <div class="w50" @click="openFacilityDialog('ALARM_DTL', true)">电梯 {{baseInfo.dtNum}}</div>
                    </div>
                    <div class="bottom-line">
                      <div @click="openFacilityDialog('ALARM_HWGGL', true)">户外广告 {{baseInfo.hwggNum}}</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="main-li">
              <div class="top">
                <img src="@/assets/alarm/08.png" alt="">
                <div class="right">
                  <span>市政设施</span>
                  <div class="bottom">
                    <div class="bottom-line">
                      <div class="w50" @click="openFacilityDialog('ALARM_RQL', true)">燃气设施 {{baseInfo.rqNum}}</div>
                      <div class="w50" @click="openFacilityDialog('ALARM_GSL', true)">供水设施 {{baseInfo.gsNum}}</div>
                      <div class="w50" @click="openFacilityDialog('ALARM_PSL', true)">排水设施 {{baseInfo.psNum}}</div>
                      <div class="w50" @click="openFacilityDialog('ALARM_GRL', true)">供热设施 {{baseInfo.grNum}}</div>
                    </div>
                    <div class="bottom-line">
                      <div class="w50" @click="openFacilityDialog('ALARM_HWL', true)">环卫设施 {{baseInfo.hwNum}}</div>
                      <div class="w50" @click="openFacilityDialog('ALARM_ZHGLL', true)">综合管廊设施 {{baseInfo.zhglNum}}</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="flex-box">
      <div class="box-1 box">
        <cityAlarmTable/>
      </div>
      <div class="box-2 box">
        <monitoringDevice/>
      </div>
      <div class="box-3 box">
        <alarmStatistics/>
      </div>
    </div>
    <div class="flex-box">
      <div class="box-1 box">
        <earlyWarningStatistics/>
      </div>
      <div class="box-2 box">
        <alarmTrend/>
      </div>
      <div class="box-3 box">
        <earlyWarningTrend/>
      </div>
    </div>
    <facilityDialog
      :modeType="modeType"
      :dialogVisible="facilityDialogVisible"
      @close="openFacilityDialog('', false)"
    ></facilityDialog>
  </div>
</template>

<script>
import formTitleVue from "@/components/FormTitle/formTitle.vue";
import monitoringDevice from "./components/monitoringDevice.vue"
import cityAlarmTable from "./components/cityAlarmTable.vue"
import alarmStatistics from "./components/alarmStatistics.vue"
import alarmTrend from "./components/alarmTrend.vue"
import earlyWarningStatistics from "./components/earlyWarningStatistics.vue"
import earlyWarningTrend from "./components/earlyWarningTrend.vue"
import { alarmDayListAll, baseNumStatistics } from '@/api/alarm/statistics'
import facilityDialog from "./components/facilityDialog.vue"


export default {
  name: "overview",
  components: {
    formTitleVue,monitoringDevice,cityAlarmTable,alarmStatistics,alarmTrend,
    earlyWarningStatistics,earlyWarningTrend,facilityDialog
  },
  data() {
    return {
      todayData:{
        recordNum:0,
        tbRecordNum:0,
        recordCzNum:0,
        recordCzNum1:0,
        warnNum:0,
        tbWarnNum:0,
        warnCzNum:0
      },
      recordCompare:{
        class:"el-icon-caret-bottom",
        color:"color:green",
        num:"0%",
      },
      warnCompare:{
        class:"el-icon-caret-bottom",
        color:"color:green",
        num:"0%",
      },
      baseInfo:{
          rlmdNum:0,
          dlNum:0,
          qlNum:0,
          zjgdNum:0,
          jzNum:0,
          dtNum:0,
          hwggNum:0,
          rqNum:0,
          gsNum:0,
          psNum:0,
          hwNum:0,
          zhglNum:0,
          grNum:0
      },
      modeType:"",
      facilityDialogVisible:false
    };
  },
  methods: {
    getPercent(today,yesterday){
      if(today==yesterday){
        return {
          class:"el-icon-caret-bottom",
          color:"color:green",
          num:"0%",
        }
      }
      // 同比增长率=（本期数－同期数）÷同期数×100%
      if(today>yesterday){
        let num = today*100 + "%"
        if(yesterday!=0){
            num =((today-yesterday)/yesterday*100).toFixed(2) + "%"
        }
        return {
          class:"el-icon-caret-top",
          color:"color:red",
          num:num,
        }
      }
      if(today<yesterday){
        let num = ((yesterday-today)/yesterday*100).toFixed(2) +"%"
        return {
          class:"el-icon-caret-bottom",
          color:"color:green",
          num:num,
        }
      }
    },
    getTodayNum(){
      alarmDayListAll({areaCode: this.$store.state.account.user.deptIds}).then(res=>{
        if(res.code==200){
          this.todayData = res.data
          this.recordCompare = this.getPercent(res.data.recordNum,res.data.tbRecordNum)
          this.warnCompare = this.getPercent(res.data.warnNum,res.data.tbWarnNum)
          // ============================
          // let temp = {
          //   recordNum: 110,
          //   tbRecordNum: 0,
          //   recordCzNum: 10,
          //   warnNum:0,
          //   tbWarnNum:110,
          //   warnCzNum:20
          // }
          // this.todayData = temp
          // this.recordCompare = this.getPercent(temp.recordNum,temp.tbRecordNum)
          // this.warnCompare = this.getPercent(temp.warnNum,temp.tbWarnNum)
        }
      })
    },
    getBaseData(){
      baseNumStatistics({areaCode: this.$store.state.account.user.deptIds}).then(res=>{
        if(res.code==200){
          this.baseInfo= res.data
        }
      })
    },
    openFacilityDialog(modeType, value){
       // 打开弹框
      this.modeType = modeType
      this.facilityDialogVisible = value
    }
  },
  activated(){
    this.getTodayNum()
    this.getBaseData()
  }
};
</script>

<style lang="scss" scoped>
@import "@/views/xy/runningAnalysis/runningAnalysis.scss";
@import "@/views/xy/alarm/overview/overview.scss";


</style>
